/*
  学习目标：setState
  作用: 修改数据
  语法: this.setState({更新的属性名： 新值})
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 1,
    list: [1, 2, 3],
  };

  handelAdd = () => {
    console.log('this  ----->  ', this);
    // this.setState({ count: this.state.count + 1 });
    // 💥💥 不可变数据： 不允许直接修改原始数据
    // 💥💥 新值覆盖旧值
    this.setState({ list: [...this.state.list, 4] });
    // 以下代码都是错误的写法
    // ❌ this.state.count++;
    // ❌ this.setState({ count: this.state.count++ });
    // ❌ this.state.list.push(4);
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <h2>{this.state.list}</h2>
        <button onClick={this.handelAdd}>点我++</button>
      </div>
    );
  }
}
